<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin: 100px;
            position: relative;
            overflow: hidden;
        }

        .content {
            padding: 5px 18px 5px 5px;
            position: absolute;
            top: 0;
            left: 0;

        }

        .scroll {
            width: 18px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #eee;
        }

        .bar {
            height: 100px;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: red;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="content" id="content">
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
        我是文字内容，你是谁，你饿不饿是文字内容
    </div>
    <div id="scroll" class="scroll">
        <div class="bar" id="bar"></div>
    </div>
</div>
<script>
    var box = document.getElementById("box");
    var content = document.getElementById("content");
    var scroll = document.getElementById("scroll");
    var bar = document.getElementById("bar");

    //1 求 滚动条的高度
    //  content的高度/box的高度 = scroll的高度/bar的高度
    // bar的高度 = scroll的高度 * box的高度 / content的高度
    var barHeight = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;
    bar.style.height = barHeight + "px";


    //2 滚动滚动条  设置滚动条的位置
    scroll.onmousedown = function (e) {
        //获取鼠标在bar中的位置
        var spaceY = e.clientY - bar.offsetTop;

        document.onmousemove = function (e) {
            //bar在scroll中的坐标
            var y = e.clientY - spaceY;

            //控制bar不离开 scroll
            y = y < 0 ? 0 : y;
            y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;

            bar.style.top = y + "px";

            //取消文本的选择
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            //3 内容滚动的距离
            // bar滚动的距离/content滚动的距离 = bar的最大滚动距离/content的最大滚动距离
            //content滚动的距离 = bar滚动的距离 * content的最大滚动距离 / bar的最大滚动距离;

            var barToMove = scroll.offsetHeight - bar.offsetHeight;
            var contentToMove = content.offsetHeight - box.offsetHeight;

            var marginTop = y * contentToMove / barToMove;
            content.style.marginTop = -marginTop + "px";
        }
    }

    document.onmouseup = function () {
        document.onmousemove = null;
    }

</script>
</body>
</html>